// 基础布局文件
import React from 'react';
import { Layout } from 'antd';
import { useSelector, useDispatch } from 'react-redux';


import "./basic-layout.css"
import Sider from './components/sider';
import Header from './components/header';
import Content from './components/content';
import { RootState } from '@/store';
import { setCollapsed } from '@/store/modules/app';



const BasicLayout: React.FC = () => {

    //const [collapsed, setCollapsed] = useState(false);
    const collapsed = useSelector((state: RootState) => state.app.collapsed);
    const dispatch = useDispatch()
    const handleChange = (bol: boolean) => {
        dispatch(setCollapsed(bol));
    }
    return (
        <Layout id="basic-layout">
            <Sider collapsed={collapsed} />
            <Layout className="site-layout">
                <Header collapsed={collapsed} setCollapsed={handleChange} />
                <Content />

            </Layout>
        </Layout>
    );
};

export default BasicLayout;